<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<!-- 准备好一个容器，承载整个react -->
	<div id="root"></div>
	<div id="root2"></div>
	<div id="root3"></div>

	<!-- react核心库 -->
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<!-- 支持react操作dom -->
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<!-- 将jsx转为js -->
	<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
	<!-- 对组件标签属性进行限制 -->
	<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>

	<script type="text/babel">
		class Person extends React.Component{
			// 构造器是佛接收props、是否传递给super，取决于是否希望在构造器中访问this.props。
			constructor(props){
				super(props)
				// super()
				console.log('constructor', props)
				console.log('constructor', this.props)
			}

			// 为Person的props的成员进行类型、必要性的限制
	  	static propTypes = {
				name: PropTypes.string.isRequired,	//限制name必须是string类型，且为必传
				sex: PropTypes.string,	//限制sex必须是string类型
				age: PropTypes.number,	//限制age必须是number类型，且为必传
			}
			// 为Person的props的成员属性设置默认值
			static defaultProps = {	
				sex: "其他",	//sex默认为'男'
				age: 18,	//age默认为18
			}

			render(){
				console.log(this);
				return (
					<ul>
						<li>姓名：{this.props.name}</li>
						<li>性别：{this.props.sex}</li>
						<li>年龄：{this.props.age}</li>
					</ul>
				)
			}
		}

	ReactDOM.render(<Person name="juehm" age={24} sex="男" />, document.getElementById('root'))
	</script>
</body>

</html>